s
<template>
  <div class="">
    <search v-model="searchValue" @search="toSearch"></search>
    <div pb-80>
      <div flex justify-center gap-24 py-80>
        <div
          v-for="(i, idx) in tags"
          :key="idx"
          class="tag"
          :class="{ 'tag-active': currentTag === i }"
          @click="clickTag(i)"
        >
          {{ i }}
        </div>
      </div>
      <div flex flex-wrap gap-40 justify-center>
        <div v-for="(i, idx) in plugins" :key="idx" class="plugin-item relative">
          <div flex px-29 pt-45 style="border-bottom: 1px solid #e1e5eb">
            <div class="bg-#E6F0FF border-rd-15 flex items-center justify-center w-60 h-60">
              <img src="@/assets/image/alipay.png" alt="" h-29 w-29 object-contain />
            </div>
            <div ml-24 flex-1>
              <h1 h-55 mb-20 text-24>{{ i.title }}</h1>
              <div flex text-14 h-46 class="text-#5F6368">
                <div>版本：{{ i.version }}</div>
                <div ml-16 flex-1 flex>
                  <div>更新：</div>
                  <div flex-1>{{ i.updateTime }}</div>
                </div>
              </div>
            </div>
          </div>
          <div p-29>
            <div class="text-#5F6368 text-16 line-height-30 h-124 mb-10">
              {{ i.content }}
            </div>
            <div pl-24>
              <div line-height-42 v-html="i.list"></div>
            </div>
            <div class="bottom flex items-center">
              <div
                class="bg-#F5F7FA flex items-center justify-center w-171 h-33 border-rd-4 text-14"
              >
                兼容：Shopify 2023+
              </div>
              <el-button
                type="primary"
                h-49
                w-126
                text-16
                ml-10
                border-rd-6
                @click="toDownload(i.downloadUrl)"
                >立即下载</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <question></question>
    <support></support>
  </div>
</template>

<script setup lang="ts">
import search from './search.vue'
import question from './question.vue'
import support from './support.vue'
import { ref, onMounted, watch } from 'vue'
import API from '@/request/api/index'
const baseUrl = import.meta.env.VITE_APP_BASE_API.slice(0, -1)
const searchValue = ref('')

/**
 * 标签（分类）
 */
const tags = ref([])
const currentTag = ref<string | number>('全部插件')
const clickTag = (value: string | number) => {
  currentTag.value = value
  toSearch()
}
const toDownload = (url: string) => {
  window.open(`${baseUrl}${url}`)
}
/**
 * 插件列表
 */
const plugins = ref([])
onMounted(async () => {
  const response = await API.getPluginsCategories()
  if (response.code === 200) {
    tags.value = ['全部插件', ...response.data]
  }
  toSearch()
})
const toSearch = () => {
  API.getPluginsSearch({
    category: currentTag.value === '全部插件' ? '' : currentTag.value,
    title: searchValue.value
  }).then((res) => {
    console.log(res)
    if (res.code === 200) {
      plugins.value = res.data.map((i: any) => {
        i.list = i.features.replaceAll(';', '<br>')
        return i
      })
    }
  })
}

</script>

<style scoped lang="scss">
.tag {
  display: flex;
  align-items: center;
  border-radius: 50px;
  background: #ffffff;
  border: 2px solid #e1e5eb;
  height: 55px;
  padding: 0 35px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.tag-active {
  background: #448bf5;
  border-color: #448bf5;
  color: #fff;
}
.plugin-item {
  width: 360px;
  height: 634px;
  border-width: 4px 0px 0px 0px;
  border-style: solid;
  border-color: #448bf5;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  flex: 1 1 24%;
  max-width: 24%;
  .bottom {
    position: absolute;
    left: 50%;
    bottom: 29px;
    transform: translateX(-50%);
  }
}
</style>
